<template>
	<div>
		<div class="h2">积分发放申请管理</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="名称">
							<a-input autocomplete="off" class="field-right" placeholder="请输入名称搜索"
								v-decorator="[`key`]" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="课程类型">
							<a-select :allowClear="true" v-decorator="['activityTypeID']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in ActivityTypeData" :key="item.ID"
									:value="item.ID">
									{{ item.Name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				<!-- 	<a-col :span="8">
						<a-form-item label="课程奖项">
							<a-select :allowClear="true" v-decorator="['activityTypePrizeID']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in ActivityTypePrizeTypeList" :key="item.Key"
									:value="item.Key">
									{{ item.Value }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col> -->

					<a-col :span="8">
						<a-form-item label="状态">
							<a-select :allowClear="true" v-decorator="['state']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in stateData" :key="index" :value="item.Key">
									{{ item.Value }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<!-- <a-col :span="8">
						<a-form-item label="部门">
							<a-select :allowClear="true" v-decorator="['departCode']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in DepartCodeList" :key="index"
									:value="item.Code">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col> -->
					<!-- <ClubSearch :span="8" label="班级" name="classID" ref="classID" @tap="searchValueFun"></ClubSearch>
					<a-col :span="8">
						<a-form-item label="学期">
							<a-select :allowClear="true" v-decorator="['typeID']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in SemesterList" :key="index" :value="item.ID">
									{{ item.Name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="积分申请周期">
							<a-select :allowClear="true" v-decorator="['creditSessionID']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in CreditSessionData" :key="index"
									:value="item.ID">
									{{ item.Title }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col> -->

					<!-- <a-col :span="8">
						<a-form-item label="申请人">
							<template>
								<a-select v-decorator="['memberNo']" showSearch optionFilterProp="children"
									style="width: 100%" :showArrow="false" @search="fetchmember"
									:filterOption="filterOption" placeholder="请输入关键字进行搜索" allowClear>
									<a-select-option v-for="(item, index) in memberList" :key="item.UserNo">
										{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}
									</a-select-option>
								</a-select>
							</template>
						</a-form-item>
					</a-col> -->
					<a-col :span="8">
						<a-form-item label="申请类型">
							<a-select :allowClear="true" v-decorator="['applyType']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in applyTypeData" :key="index" :value="item.ID">
									{{ item.Name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="申请时间">
							<a-range-picker v-decorator="['data']" />
						</a-form-item>
					</a-col>

				</a-row>
			</a-form>
		</div>
		<a-button-group size="default" class="option">
			<a-button type="primary" @click="handleSearch">搜索</a-button>
			<a-button @click="handleReset">重置</a-button>
			<!-- <a-button type="primary" @click="addList">新增</a-button> -->
			<a-button type="primary" @click="exportList()">导出</a-button>
			<!-- <a-button type="danger" class="btn" @click="deleteAllList">批量删除</a-button> -->
		</a-button-group>
		<div>
			<el-table stripe :data="data" v-loading="loading" border :max-height="tableHeight"
				@selection-change="handleSelectionChange" highlight-current-row style="width: 100%;">
				<!-- <el-table-column type="selection" width="55" fixed="left"></el-table-column> -->
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="Title" label="名称" min-width="100"></el-table-column>
				<el-table-column prop="Name" label="状态/课程类型" min-width="220">
					<template slot-scope="scope">
						<a-tag :color="scope.row.State==2?'green':'red'">{{ scope.row.StateName}}</a-tag>
						{{ scope.row.ActivityTypeName }}
					</template>
				</el-table-column>
				<el-table-column prop="ActivityTypePrizeName" label="奖项名称/类型" min-width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						{{ scope.row.ActivityTypePrizeName|| scope.row.MemberTypeName}}
					</template>
					
				</el-table-column>
				<el-table-column prop="Score" label="申请数量" min-width="90" show-overflow-tooltip="">
					<template slot-scope="scope">
						{{ scope.row.UserNum}}
					</template>
				</el-table-column>
				<el-table-column prop="Score" label="分值" min-width="80" show-overflow-tooltip=""></el-table-column>
				<el-table-column prop="Score" label="添加人" min-width="185" show-overflow-tooltip="">
					<template slot-scope="scope">
						<a-tag color="green">{{ scope.row.AddUserNo}}/{{ scope.row.AddUserName}}</a-tag>
					</template>
				</el-table-column>
				<el-table-column prop="Score" label="添加时间" min-width="155" show-overflow-tooltip="">
					<template slot-scope="scope">{{ scope.row.AddTime}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<div>
							<!-- <a-tooltip placement="top">
											<template slot="title">修改</template>
											<i title="修改" class="iconfont icon-editor1" style="color: #1890FF;"
												@click="modifyList(scope.row, 'modify')"></i>
										</a-tooltip>
			-->
							<a-tooltip placement="top">
								<template slot="title">详情</template>
								<i title="详情" class="iconfont icon-xiangqing" style="color: green;"
									@click="seeDetail(scope.row)"></i>
							</a-tooltip>
							<a-tooltip placement="top" v-if="scope.row.State==2">
								<template slot="title">发放记录</template>
								<i title="发放记录" class="iconfont icon-guanli" style="color: #1890FF;"
									@click="seeList(scope.row, 'CreditSendRecordsendrecord')"></i>
							</a-tooltip>
							<a-tooltip placement="top" >
								<template slot="title">删除</template>
								<i title="删除" class="iconfont icon-delete" style="color: red;"
									@click="deleteList(scope.row)"></i>
							</a-tooltip>

						</div>

					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"></el-pagination>
		</div>
		<add :ActivityTypePrizeTypeList="ActivityTypePrizeTypeList" :ActivityMemberTypeList="ActivityMemberTypeList"
			:ActivityTypeData="ActivityTypeData" :text="text" :DepartCodeList="DepartCodeList" :TypeIDList="TypeIDList"
			v-show="addIf" @closeFun="closeFun">
		</add>
		<!-- <clubDetail :text="text1" v-show="clubDetailShow" @closeFun="closeFun"></clubDetail> -->
	</div>
</template>


<script>
	function getBase64(img, callback) {
		const reader = new FileReader();
		reader.addEventListener('load', () => callback(reader.result));
		reader.readAsDataURL(img);
	}
	import add from './add';
	import ClubSearch from '@/components/SearchForm/ClubSearch.vue'
	// import clubDetail from './clubDetail';
	import Func from '@/utils/func';
	import Cache from '@/utils/cache';
	import {
		ManageCreditSendRecordManageDoGetPageList,
		ManageCreditSendRecordManageDoDelete,
		GetUserList,
		EnableClub,
		GetClubTypeList,
		GetDepartList,
		UserDoUpdateBase64Image,
		UserDoSetHeadImage,
		GetActivityTypeList,
		CommonDoGetActivityTypeScoreList,
		CommonDoGetActivityTypePrizeTypeList,
		DoGetActivityMemberTypeListCommon,
		DoGetSemesterListCommon,
		ManageCreditSessionDoGetPageList,
		CommonDoGetCreditSendRecordStateList
	} from '@/api/follow';
	const data = [];
	export default {
		components: {
			add,
			ClubSearch
		},
		data() {
			return {
				CreditSessionData: [],
				SemesterList: [],
				stateData: [ ],
				applyTypeData: [{
						ID: '1',
						Name: "参与申请"
					},
					{
						ID: '2',
						Name: "获奖申请"
					}
				],
				ActivityTypePrizeTypeList: [],
				ActivityMemberTypeList: [],
				ActivityTypeData: [],
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				text: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				departmentList: [],
				worklist: [],
				loading: false,
				values: {},
				pages: {
					pageIndex: 2,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				TypeIDList: [],
				DepartCodeList: [],
				fileList: [],
				clubDetailShow: false,
				text1: {},
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
				teacherList: [],
				memberList: [],
				multipleSelection: []
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getOtherList();
		},
		mounted() {},
		methods: {
			searchValueFun(name, value) {
				this.values = {
					...this.values,
					[name]: value
				}
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			deleteAllList() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请先选择要删除的数据！');
				} else {
					let that = this;
					this.$confirm({
						title: '提示',
						content: '确定要删除选中的数据吗？',
						okText: '确认',
						cancelText: '取消',
						async onOk() {
							let list = that.multipleSelection;
							for (let i = 0, len = list.length; i < len; i++) {
								let data = {};
								data.id = list[i].ID;
								let res = await ManageCreditSendRecordManageDoDelete(data);
							}
							that.getList();
						}
					});
				}
			},
			async fetchteacher(value) {
				// let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					data.top = 20;
					let res = await GetUserList(data);
					this.teacherList = res.data.data;
				}
			},
			async fetchmember(value) {
				// let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					data.top = 20;
					let res = await GetUserList(data);
					this.memberList = res.data.data;
				}
			},
			exportList() {
				this.form.validateFields((error, values) => {
					// ticket
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					let hrefUrl = this.requestUrl + 'Manage/CreditSendRecordManage/DoExport?userToken=' +
						encodeURIComponent(
							this
							.token);
					let hrefStr = '';
					for (let key in values) {
						if (values[key]) {
							hrefStr += key + '=' + values[key] + '&';
						}
					}
					console.log(values)
					// return;
					window.open(hrefUrl + '&' + hrefStr, '_blank');
				});
			},
			beforeUpload(file) {
				this.fileList = [...this.fileList, file];
			},
			async handleChange(info) {
				if (info.file.originFileObj) {
					getBase64(info.file.originFileObj, imageUrl => {
						this.imageUrl = imageUrl;
						let data = {};
						data.data = this.imageUrl.substr(22);
						Promise.resolve(UserDoUpdateBase64Image(data)).then(v => {
							let data1 = {};
							data1.headImage = v.data.url;
							Promise.resolve(UserDoSetHeadImage(data1)).then(m => {});
						});
					});
				} else {
					return false;
				}
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				let res = await ManageCreditSendRecordManageDoGetPageList(data);
				this.loading = false;
				this.data = res.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
			},
			async getOtherList() {
				let res = await GetClubTypeList();
				let res2 = await GetDepartList();
				this.TypeIDList = res.data.data;
				this.DepartCodeList = res2.data.data;
				let res3 = await GetActivityTypeList()
				this.ActivityTypeData = res3.data.data
				let res4 = await CommonDoGetActivityTypePrizeTypeList()
				this.ActivityTypePrizeTypeList = res4.data.data

				let res5 = await DoGetActivityMemberTypeListCommon();
				this.ActivityMemberTypeList = res5.data.data;
				let res6 = await DoGetSemesterListCommon();
				this.SemesterList = res6.data.data;

				let res7 = await ManageCreditSessionDoGetPageList(data);
				this.CreditSessionData = res7.data.data;
				let res8=await CommonDoGetCreditSendRecordStateList();
				this.stateData=res8.data.data;

			},
			addList() {
				this.text = {};
				this.addIf = !this.addIf;
			},
			modifyList(text) {
				this.text = {
					...text,
					time: new Date()
				};
				this.addIf = !this.addIf;
			},
			enableList(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定要${text.IsEnable ? '停用' : '启用'}该学生组织吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await EnableClub(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			deleteList(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定删除该申请吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await ManageCreditSendRecordManageDoDelete(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			seeList(text, name) {
				this.$router.push({
					name: name,
					query: {
						ID: text.ID,
						Name: text.Name
					}
				});
			},
			seeDetail(text) {
				this.$router.push({
					name: 'CreditSendRecordDetail',
					query: {
						ID: text.ID,
						Name: text.Name,
						source:"发放申请列表"
					}
				});
			},
			closeFun(data) {
				this.addIf = false;
				this.clubDetailShow = false;
				if (data == 1) {
					this.getList();
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.home-form /deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;
	}

	.home-form /deep/.ant-form-item-label {
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.home-form /deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	.option {
		margin-top: 0px;
		margin-bottom: 20px;
		overflow: hidden;

		.ant-btn {
			font-size: 12px;
		}
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}

	.el-pagination {
		margin-top: 10px;
	}
</style>
